<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useThemeStore } from "@/store";
import {
  DataLine,
  Shop,
  Food,
  Menu,
  Tickets,
  Discount,
  PieChart,
  Star,
  User,
  Moon,
  Sunny,
} from "@element-plus/icons-vue";

const router = useRouter();
const activeMenu = ref("dashboard");
const themeStore = useThemeStore();

const menuList = [
  {
    index: "dashboard",
    icon: DataLine,
    label: "仪表盘",
    route: "/merchant/dashboard",
  },
  {
    index: "store",
    icon: Shop,
    label: "店铺管理",
    route: "/merchant/store",
  },
  {
    index: "foods",
    icon: Food,
    label: "商品管理",
    route: "/merchant/foods",
  },
  {
    index: "categories",
    icon: Menu,
    label: "分类管理",
    route: "/merchant/categories",
  },
  {
    index: "orders",
    icon: Tickets,
    label: "订单管理",
    route: "/merchant/orders",
  },
  {
    index: "promotions",
    icon: Discount,
    label: "促销管理",
    route: "/merchant/promotions",
  },
  {
    index: "statistics",
    icon: PieChart,
    label: "统计分析",
    route: "/merchant/statistics",
  },
  {
    index: "reviews",
    icon: Star,
    label: "评价管理",
    route: "/merchant/reviews",
  },
  {
    index: "profile",
    icon: User,
    label: "个人信息",
    route: "/merchant/profile",
  },
];

const handleMenuSelect = (index: string) => {
  const menu = menuList.find((item) => item.index === index);
  if (menu) {
    activeMenu.value = index;
    router.push(menu.route);
  }
};

// 切换主题
const toggleTheme = () => {
  themeStore.toggleTheme();
};
</script>

<template>
  <div class="merchant-nav-bar">
    <div class="logo">
      <img src="/logo.png" alt="饱了么" class="logo-image" />
      <h2>饱了么</h2>
      <p>商家管理系统</p>
    </div>

    <!-- 主题切换按钮 -->
    <div class="theme-toggle">
      <el-button
        :icon="themeStore.isDark ? Sunny : Moon"
        circle
        @click="toggleTheme"
        :class="{ 'dark-mode': themeStore.isDark }"
      ></el-button>
    </div>

    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      :class="{ 'dark-menu': themeStore.isDark }"
      @select="handleMenuSelect"
    >
      <el-menu-item
        v-for="item in menuList"
        :key="item.index"
        :index="item.index"
      >
        <el-icon :size="22"><component :is="item.icon" /></el-icon>
        <span>{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.merchant-nav-bar {
  width: 240px;
  min-width: 220px;
  height: 100vh;
  background: linear-gradient(135deg, #ffe082 0%, #ffd54f 100%);
  color: #7c4a03;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 2px 0 16px 0 #ffd54f33;
  border-right: 2px solid #ffd54f;
  position: relative;
  z-index: 2;
}

.dark-theme .merchant-nav-bar {
  background: linear-gradient(135deg, #424242 0%, #303030 100%);
  color: #e0e0e0;
  box-shadow: 2px 0 16px 0 rgba(0, 0, 0, 0.3);
  border-right: 2px solid #424242;
}

.logo {
  margin: 2.5rem 0 1rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-image {
  width: 64px;
  height: 64px;
  margin-bottom: 0.8rem;
}

.logo h2 {
  font-size: 2rem;
  color: #d2691e;
  margin-bottom: 0.2rem;
  font-family: "Noto Serif SC", "阿里巴巴普惠体", "思源宋体", "微软雅黑", Arial,
    sans-serif;
  text-shadow: 0 2px 16px #ffe08288, 0 1px 0 #fffbe7;
}

.dark-theme .logo h2 {
  color: #ffa726;
  text-shadow: 0 2px 16px rgba(255, 167, 38, 0.3), 0 1px 0 #424242;
}

.logo p {
  font-size: 1rem;
  color: #a05a1c;
  opacity: 0.8;
  margin-bottom: 0;
}

.dark-theme .logo p {
  color: #ffb74d;
}

/* 主题切换按钮 */
.theme-toggle {
  margin: 1rem 0 1rem 0.3rem;
}

.theme-toggle .el-button {
  background-color: #ffd54f;
  border-color: #ffd54f;
  color: #a05a1c;
}

.theme-toggle .el-button.dark-mode {
  background-color: #303030;
  border-color: #424242;
  color: #ffa726;
}

.el-menu-vertical {
  width: 100%;
  border-right: none;
  background: transparent;
  font-family: "Noto Serif SC", "阿里巴巴普惠体", "思源宋体", "微软雅黑", Arial,
    sans-serif;
  margin-left: 0.1rem;
}

.el-menu-item {
  border-radius: 12px;
  margin: 0.5rem 0.5rem;
  transition: background 0.2s, color 0.2s;
  font-size: 1.1rem;
  font-weight: 500;
  color: #a05a1c;
}

.dark-theme .el-menu-item {
  color: #e0e0e0;
}

.el-menu-item.is-active,
.el-menu-item:hover {
  background: #ffe082 !important;
  color: #d2691e !important;
}

.dark-theme .el-menu-item.is-active,
.dark-theme .el-menu-item:hover {
  background: #424242 !important;
  color: #ffa726 !important;
}

.el-icon {
  margin-right: 12px;
  color: #bfa16b;
}

.dark-theme .el-icon {
  color: #ffb74d;
}
</style>
